<template>
  <span>
    <!-- {{ data.fileList }} -->
    <!-- 本地调试,不上传模式    :auto-upload="false" -->
    <el-upload
      v-model:file-list="data.fileList"
      multiple
      :headers="props.config.headers"
      :action="props.config.url"
      :limit="props.config.limit"
      :auto-upload="true"
      :on-change="onChange"
      :on-error="onError"
      :on-exceed="handleExceed"
      :before-upload="beforeAvatarUpload"
    >
      <el-button type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          {{ props.config.info }}
        </div>
      </template>
      <!-- <template #file="{ file }">
                <div class="f-fcont  f-aic" style="width:200px;">
                    <span class="f-mr10 f-tal f-ell" style="width:100px;" :title="file">
                        {{ file.name }}
                    </span>
                    <el-icon class="f-mr10 f-cp" :size="19"
                        @click="handlePictureCardPreview(file)"><zoom-in /></el-icon>

                    <el-icon class="f-mr10 f-cp" :size="19" @click="handleRemove(file)">
                        <Delete />
                    </el-icon>
              
                </div>
            </template> -->
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img
        style="width: 100%; max-width: 800px"
        :src="dialogImageUrl"
        alt="Preview Image"
      />
    </el-dialog>
  </span>
</template>
<script setup>
import {
  ref,
  reactive,
  toRefs,
  watchEffect,
  computed,
  watch,
  onUpdated,
  onBeforeUpdate,
  onBeforeMount,
  onMounted,
} from "vue";

// props接收数据
const props = defineProps({
  value: {
    type: [Array, String],
    default: function () {
      return [];
    },
  },
  config: {
    type: Object,
    default: function () {
      return {
        limit: 3,
        type: ["image/png", "image/jpeg", "application/pdf"],
        size: 1024 * 1024 * 2, // 2MB
        info: "jpg/png 文件 且大小不超过 500kb",
      };
    },
  },
  // 多种类型
});

// const data = reactive({fileList: computed(() => props.value)});
const data = reactive({ fileList: [] });

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const onChange = (uploadFile, uploadFiles) => {
  // return false
  // console.log(11111,222222222222222)
  var number = props.config.limit;
  data.fileList = data.fileList.slice(-number);
};

const emit = defineEmits(["change", "update:emit"]);
// emit('update:emit', data.value); // 双向绑定数据改变,update必须结合v-model
const onHttpRequest = function (param) {
  console.log(param);
  return klcs
    .ajaxTest("https://www.fastmock.site/mock/")
    .then((res) => {
      console.log(res);
      if (res) {
        param.onSuccess();
        ElMessage.success("上传成功");
        emit("update:value", data.fileList); // 双向绑定数据改变,update必须结合v-model
        emit("change", data.value); // 事件触发
      } else {
        // ElMessage.error('上传失败')
        param.onError();
      }
    })
    .catch((err) => {
      // ElMessage.error('上传失败')
      console.error("上传失败", err);
      param.onError();
    });
};

// 上传前校验格式和大小
const beforeAvatarUpload = (rawFile) => {
  console.info("校验格式", rawFile.type);
  if (!props.config.type.includes(rawFile.type)) {
    ElMessage.error("文件格式不正确!");
    return false;
  }
  // 校验大小
  if (rawFile.size > props.config.size) {
    ElMessage.error("文件大小超过限制!");
    return false;
  }

  return true;
};

const onError = function (err, file, fileList) {
  console.log(err, file, fileList);
  ElMessage.error("上传失败");
};

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleRemove = (file) => {
  let index = data.fileList.findIndex((fileItem) => fileItem === file.response);
  data.fileList.splice(index, 1);
  console.log(file);
};

const handleDownload = (file) => {
  console.log(file);
};

// 异常提示
const handleExceed = (files, uploadFiles) => {
  console.log(11111, 222222222222222);
  if (data.fileList.length >= props.config.limit) {
    ElMessage.error("超出上传限制!");
    return false;
  } else {
    ElMessage.error("超出上传限制!");
  }
  // ElMessage.warning(
  //     `请按照要求上传文件 `
  // )
};

watch(
  () => props.value,
  (newValue, oldValue) => {
    if (props.value) {
      data.fileList = klcs.deepClone(true, [], props.value);
    } else {
    }
  },
  { deep: true, immediate: true }
);
</script>
